<template>
  <view
    class="button text-700-232"
    :class="[{ disabled }]"
    :style="style"
    @click="onClick">
    {{ text }}
  </view>
</template>

<script lang="ts" setup>
	/**
	 * @description 自定义按钮
	 * @property {String} text 按钮文字
	 * @property {String|Number} width 按钮宽度
	 * @property {String} background 按钮背景颜色
	 * @event {Function} click 按钮点击事件
	 */

  import { StyleValue, computed } from 'vue'

  const props = defineProps({
    text: {
      type: String,
      default: '按钮',
    },
    width: {
      type: [String, Number],
      default: '100%',
    },
    disabled: { type: Boolean },
    top: {
      type: Number,
      default: 160,
    },
    size: {
      type: Number,
      default: 32,
    },
    color: {
      type: String,
      default: '',
    },
    background: {
      type: String,
      default: '',
    },
  })

  const emit = defineEmits(['click'])

  const style = computed(() => {
    const styles : StyleValue = {
      'width': '100%',
      'height': '88rpx',
      'margin-top': `${props.top}rpx`,
      'font-size': `${props.size}rpx`,
      'line-height': '88rpx',
    }

    const width = props.width.toString()

    if (width.endsWith('%') || width.endsWith('rpx')) {
      styles.width = width
    } else {
      styles.width = `${width}rpx`
    }

    if (props.color != '') {
      styles.color = props.color
    }

    if (props.background != '') {
      styles.background = props.background
    }

    return styles
  })

  const onClick = () => {
    if (props.disabled) return

    emit('click')
  }
</script>

<style lang="scss" scoped>
	.button {
		text-align: center;
		border-radius: 10rpx;
		background-color: $bg-color-2;
		&.disabled {
			color: $text-color-3;
			background-color: $bg-color-7;
		}
	}
</style>
